<template>
    <div class="userInfo-container">
        <b-container class="bv-example-row row-box">
            <!-- 用户个人信息区域 -->
            <b-row class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="9" lg="9">
                    <div class="bg3Color">
                        <div class="user-header">
                            <Breadcrumb>
                                <BreadcrumbItem to="/">主页</BreadcrumbItem>
                                <BreadcrumbItem></BreadcrumbItem>
                            </Breadcrumb>
                        </div>
                        <div class="userINfo-detail">
                            <div class="user-title">
                                <router-link :to="'/userInfo' + user.uId"><img :src="user.uAvatar" alt=""></router-link>
                                <div class="nick-time">
                                    <router-link :to="'/userInfo' + user.uId">{{user.uName}}</router-link>
                                    <p>{{user.uLastLogintime | dataFormat}} 来过</p>
                                </div>
                            </div>
                            <p class="register">注册时间：{{user.uCreateTime | dataFormat}}</p>
                        </div>
                    </div>
                    <div class="bg3Color">
                        <div class="user-contain">
                            <Tabs value="name1">
                                <TabPane label="商品" name="name1">
                                    <div class="hasMsg" v-if="goodsList==''">
                                        <a-empty style="padding-top:70px;"></a-empty>
                                    </div>
                                    <div class="hasMsg" v-else>
                                        <div class="myPublish-list">
                                            <div class="myPublish-item" v-for="item in goodsList" :key="item.gId">
                                                <div class="item-left">
                                                    <router-link :to="'/goodsInfo/' + item.gId"><img :src="item.mainPic" alt="">
                                                    </router-link>
                                                    <div class="goodsinfo">
                                                        <router-link :to="'/goodsInfo/' + item.gId" class="goods-title">{{item.gTitle}}
                                                        </router-link>
                                                        <p>
                                                            <span class="create-type">{{item.types.tName}}</span>
                                                            <span class="list-type"><Icon type="ios-eye" /> {{item.gViewNum}}</span>
                                                            <span class="list-type">
                                                                <Icon type="ios-chatbubbles" /> 回复数
                                                            </span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="item-right">
                                                    <span class="price">￥{{item.gPrice}}</span>
                                                    <span>{{item.gCreateTime | dataFormat}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page-all">
                                            <Page :total="allPages.total" :page-size="pageSize"
                                            :current="pageNumOne" @on-change="changePage"  />
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane label="求购" name="name2">
                                    <div class="hasMsg" v-if="wantGoodsList==''">
                                        <a-empty style="padding-top:70px;"></a-empty>
                                    </div>
                                    <div class="hasMsg" v-else>
                                        <div class="myPublish-list">
                                            <div class="myPublish-item" v-for="item in wantGoodsList" :key="item.wgId">
                                                <div class="item-left">
                                                    <router-link :to="'/wantGoodsInfo/' + item.wgId"><img :src="item.mainPic" alt="">
                                                    </router-link>
                                                    <div class="goodsinfo">
                                                        <router-link :to="'/wantGoodsInfo/' + item.wgId"
                                                        class="goods-title">{{item.wgTitle}}</router-link>
                                                        <p>
                                                            <span class="create-type">{{item.types.tName}}</span>
                                                            <span class="list-type"><Icon type="ios-eye" /> {{item.wgViewNum}}</span>
                                                            <span class="list-type">
                                                                <Icon type="ios-chatbubbles" /> 回复数
                                                            </span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="item-right">
                                                    <span class="price">￥{{item.wgPrice}}</span>
                                                    <span>{{item.wgCreateTime | dataFormat}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page-all">
                                            <Page :total="allPages.total" :page-size="pageSize"
                                            :current="pageNumOne" @on-change="changePage"  />
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane label="留言" name="name3">
                                    <div class="myinfo-item">
                                        <div class="msg-info">
                                            <span class="msg-unread"></span>
                                            <span class="msg-type">求购</span>
                                            <span class="msg-title"><router-link to="/">用户昵称</router-link></span>
                                        </div>
                                        <div class="comment-content">
                                            <div class="comment-left">
                                                <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                                <div class="comment-title">
                                                    <p><router-link to="/">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link></p>
                                                    <p>留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容</p>
                                                </div>
                                            </div>
                                            <div class="comment-right">
                                                <router-link to="/"><Icon type="md-trash" /></router-link>
                                                <span>3天前</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="myinfo-item">
                                        <div class="msg-info">
                                            <span class="msg-unread"></span>
                                            <span class="msg-type">求购</span>
                                            <span class="msg-title"><router-link to="/">用户昵称</router-link></span>
                                        </div>
                                        <div class="comment-content">
                                            <div class="comment-left">
                                                <router-link to="/"><img src="../../../assets/imgs/bg00.jpg" alt=""></router-link>
                                                <div class="comment-title">
                                                    <p><router-link to="/">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</router-link></p>
                                                    <p>留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容</p>
                                                </div>
                                            </div>
                                            <div class="comment-right">
                                                <router-link to="/"><Icon type="md-trash" /></router-link>
                                                <span>3天前</span>
                                            </div>
                                        </div>
                                    </div>
                                </TabPane>
                            </Tabs>
                        </div>
                    </div>
                </b-col>
                <b-col cols="12" sm="12" md="3" lg="3">
                    <div class="bg3Color">
                        <div class="user-header">
                            个人信息
                        </div>
                        <div class="userINfo-detail">
                            <div class="user-avator">
                                <router-link :to="'/userInfo' + user.uId"><img :src="user.uAvatar" alt=""></router-link>
                                <div class="nick-time">
                                    <router-link :to="'/userInfo' + user.uId">{{user.uName}}</router-link>
                                </div>
                            </div>
                            <p class="bio">" {{user.uBio}} "</p>
                            <div v-if="id==me"></div>
                            <div v-else>
                                <div v-if="isFollow==false">
                                    <Button type="primary" shape="circle" @click="save(user.uId)">
                                    <Icon type="md-add" /> 关注</Button>
                                </div>
                                <div v-if="isFollow">
                                    <Button type="primary" shape="circle" @click="deleteById(fId)">
                                    <Icon type="md-checkmark" /> 已关注</Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
export default {
    name: 'userInfo',
    data() {
        return {
            id: this.$route.params.uId,
            me: JSON.parse(localStorage.getItem('user')).uId,
            user: '',
            isFollow: false, // 是否关注
            fId: 0,
            pageSize: 4, // 每页显示多少条
            allPages: [], // 存放售卖商品分页的信息
            pageNumOne: 1, // 默认展示第一页数据
            goodsList: [], // 审核状态为1正常的商品列表
            wantGoodsList: [], // 审核状态为1正常的求购商品列表
            pageNumTwo: 1, // 默认展示第一页数据
            allWantPages: [], // 存放求购商品分页的信息
        }
    },
    created() {
        this.findById()
        this.findByCurrId()
        this.findByUserId()
        this.findWantByUserId()
    },
    methods: {
        // 根据用户Id查找个人信息
        findById() {
            this.$axios({
                url: 'users/findById/' + this.id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.user = res.data.object
                }
            })
        },
        // 根据当前登录用户id查看关注的用户列表
        findByCurrId() {
            this.$axios({
                url: 'follow/findByCurrId/' + JSON.parse(localStorage.getItem('user')).uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    // 判断当前查看用户和登录用户是否关注，关注设置为 true
                    res.data.list.forEach(item => {
                        if (item.fUid == this.id) {
                            this.fId = item.fId
                            this.isFollow = true
                        }
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 取消关注
        deleteById(id) {
            this.$axios({
                url: 'follow/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.$router.go(0)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 增加关注
        save(id) {
            this.$axios({
                url: 'follow/save/',
                method: 'post',
                params: {
                    fUid: id,
                    fCurrentUid: this.me,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.$router.go(0)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据用户id查询此用户发布成功的商品列表（所有审核状态为1正常的商品）
        findByUserId() {
            this.$axios({
                url: 'goods/findByUserId',
                method: 'get',
                params: {
                    gUid: this.id,
                    pageNo: this.pageNumOne,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.goodsList = res.data.pageInfo.list
                    this.allPages = res.data.pageInfo
                    this.goodsList.forEach(item => {
                        this.$axios({
                            url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
                            method: 'get',
                        }).then(res => {
                            if (res.data.code === 200) {
                                // vue给对象新增属性并触发视图更新
                                this.$set(item, 'mainPic', res.data.object.gpAddress)
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 分页改变售卖中商品页码
        changePage(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNumOne = index
            this.findByUserId()
        },
        // 根据用户id查询此用户发布成功的求购商品列表（所有审核状态为1正常的求购商品）
        findWantByUserId() {
            this.$axios({
                url: 'wantGoods/findByUserId',
                method: 'get',
                params: {
                    wgUid: this.id,
                    pageNo: this.pageNumOne,
                    pageSize: this.pageSize,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.wantGoodsList = res.data.pageInfo.list
                    this.allWantPages = res.data.pageInfo
                    this.wantGoodsList.forEach(item => {
                        this.$axios({
                            url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
                            method: 'get',
                        }).then(res => {
                            if (res.data.code === 200) {
                                // vue给对象新增属性并触发视图更新
                                this.$set(item, 'mainPic', res.data.object.wgpAddress)
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 分页改变售卖中求购商品页码
        changeWantPage(index) {
            // 加载更多，页码改变的回调，返回改变后的页码
            this.pageNumTwo = index
            this.findWantByUserId()
        },
    },
}
</script>

<style scoped>
.userInfo-container {
    min-height: 510px;
}
.bg3Color {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    margin-bottom: 15px;
}
.user-header {
    padding: 8px 12px;
}
.userINfo-detail {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #f0f0f0;
}
.user-title {
    display: flex;
    justify-content: start;
    flex-direction: row;
    align-items: center;
}
.user-title a {
    display: block;
}
.user-title img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}
.nick-time p{
    margin-bottom: 0;
}
.register {
    margin-top: 8px;
    margin-bottom: 0;
}
.user-contain {
    padding: 10px 15px;
}
.user-avator {
    display: flex;
    justify-content: start;
    flex-direction: row;
    align-items: center;
}
.user-avator a {
    display: block;
}
.user-avator img {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    margin-right: 10px;
}
.bio {
    margin-top: 10px;
    font-style: italic;
    font-size: 14px;
}
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.myPublish-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
}
.item-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width:73%;
}
.item-left img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 10px;
}
.goodsinfo p {
    margin-bottom: 0;
    font-size: 12px;
}
.goodsinfo {
    max-width:95%;
}
.goodsinfo>a {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 16px;
}
.item-right span {
    display: block;
    color: #515a6e;
    font-size: 12px;
    text-align: center;
}
.item-right .price {
    color: #ef4238;
    font-size: 14px;
}
.create-type {
    margin-right: 10px;
    color: #1890ff;
    background: #eeeeee;
    padding: 1px 2px;
    border-radius: 2px;
}
.list-type {
    margin-right: 10px;
    color: #515a6e;
}
.msg-info {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.msg-type {
    display: inline-block;
    width: 36px;
    height: 20px;
    color: #4d4d4d;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    margin-right: 5px;
}
.comment-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    margin-bottom: 10px;
}
.comment-left {
    width: 79%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.comment-left img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}
.comment-title {
    width: calc(100% - 50px);
}
.comment-title p {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
.comment-right {
    width: 12%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.comment-right a {
    color: #4d4d4d;
}
</style>